<template>
  <view class="doctor" @click="go">
    <view class="doctor-h">
      <view style="position: relative">
        <u-avatar :src="obj.avatar ? obj.avatar : 'https://res.jiyaqi.com/pet/miniapp/public/user.png'" size="128rpx" mode="aspectFill">
        </u-avatar>
        <view class="shoawBox">
          <view class="shoaw">
            <text>{{ obj.onlineFlag == 1 ? '在线' : '离线' }}</text>
          </view>
        </view>
      </view>
      <view class="doctor-info">
        <view class="flex mt8">
          <text class="name">{{ obj.trueName }}</text>
          <view style="display:flex;align-items: center;" v-if="obj.tags">
            <text class="tag" v-for="(item,index) in obj.tags.split(',')" :key="index">{{ item }}</text>
          </view>
        </view>
        <view class="content multi-ellipsis-2">
          <text class="f24 iconfont icon-a-doctortitle"></text>
          <text>{{ obj.titles }}</text>
        </view>
      </view>
    </view>
    <view class="doctor-b">
      <view class="total-item">
        <text class="total-item-num">{{ obj.treatmentCount ? obj.treatmentCount : 0 }}</text>
        <text class="total-item-t">问诊数</text>
      </view>
      <view class="total-item">
        <text class="total-item-num">{{ obj.prescriptionCount ? obj.prescriptionCount : 0 }}</text>
        <text class="total-item-t">处方数</text>
      </view>
      <view class="total-item">
        <text class="total-item-num">{{ obj.fansCount ? obj.fansCount : 0 }}</text>
        <text class="total-item-t">粉丝数</text>
      </view>
    </view>
    <view class="doctor-f">
      <view class="size multi-ellipsis-1">{{ obj.goodAt }}</view>
      <button class="btn" @click.stop="unfollow" v-if="obj.followed">已关注</button>
      <button class="btn" @click.stop="follow" v-else>关注</button>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { followApi, unFollowApi } from '@/api/user/user.js'

export default {
  props: {
    obj: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    ...mapState('user', ['UserInfo'])
  },
  methods: {
    go () {
      this.$emit('click')
    },
    // 关注医生
    follow () {
      let params = {
        targetId: this.obj.id,
        targetType: 2, //1宠友  2医生 3医院
        userId: this.UserInfo.id
      }
      followApi(params).then((res) => {
        if (res) {
          this.obj.followed = 1
          this.obj.fansCount++
          uni.$u.toast('已关注')
        }
      })
    },
    // 取关医生
    unfollow () {
      let params = {
        targetId: this.obj.id
      }
      unFollowApi(params).then((res) => {
        if (res) {
          this.obj.followed = 0
          this.obj.fansCount--
          uni.$u.toast('已取关')
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.mt8 {
  margin-top: 8rpx;
}
.doctor {
  margin: 16rpx 24rpx;
  padding: 24rpx;
  border-radius: 20rpx;
  background: #ffffff;
  &-h {
    display: flex;
  }
  &-info {
    margin-left: 24rpx;
    .name {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
      line-height: 32rpx;
    }
    .tag {
      margin-left: 12rpx;
      padding: 0 12rpx;
      display: inline-block;
      border-radius: 6rpx;
      height: 32rpx;
      line-height: 32rpx;
      font-size: 22rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FF5900;
      background: rgba($color: #FF5900, $alpha: 0.1);
    }
    .content {
      margin-top: 16rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 36rpx;
      .f24 {
        margin-right: 10rpx;
        font-size: 24rpx;
        color: #FF5900;
      }
    }
  }
  &-b {
    margin-top: 32rpx;
    display: flex;
    justify-content: space-between;
    .total-item {
      display: flex;
      width: 128rpx;
      flex-direction: column;
      align-items: center;
      &-num {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 32rpx;
      }
      &-t {
        margin-top: 16rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 24rpx;
      }
      &:nth-child(2) {
        width: 262rpx;
        border-left: 1rpx solid #e6e6e6;
        border-right: 1rpx solid #e6e6e6;
      }
    }
  }
  &-f {
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    .size {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    .btn {
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      min-width: 132rpx;
      height: 56rpx;
      background: #FF5900;
      border-radius: 28rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 56px;
    }
  }
}

.shoawBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  overflow: hidden;
  .shoaw {
    width: 100%;
    height: 40rpx;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;

    text {
      font-size: 20rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 20rpx;
    }
  }
}
</style>
